<template>
  <div class="rankingtab border-1 border-r bg-0" style="height:100%">
    <div class="header flex-s-around font-25 font-f-ib fontW-7 color-f bd-b-1 h-40">
      <div class="text-l font-25 font-f-ib fontW-7 flex-2">
        <div class="pdl-35">{{$t('rankingTable.collection')}}</div>
      </div>
      <div class="text-r font-25 font-f-ib fontW-7 flex-1_5">
        <div class="second_item mg-0">{{$t('rankingTable.amount')}} <img src="../../../assets/icon/arrow-down-s-fill.svg" alt=""></div>
      </div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1 ">{{$t('rankingTable.hours')}}</div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1 ">{{$t('rankingTable.day')}}</div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1 ">
        <div>
          {{$t('rankingTable.floorPrice')}}
        </div>
      </div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1 ">{{$t('rankingTable.holders')}}</div>
      <div class="text-c font-25 font-f-ib fontW-7 flex-1 ">{{$t('rankingTable.number')}}</div>
    </div>
    <div class="item color-f font-20 h-3 mgtb-10 flex" v-for="(item, i) in rangData" :key="item.id">
      <div class="flex flex-2 pdl-15">
        <div class="color-f font-20 fontW-7 font-f-ib">{{i+1}}</div>
        <div class="fontW-9 font-20 color-f font-f-ib"><img :src="item.img_url" style="margin:0 15px 5px" alt="">{{item.msg}}</div>
      </div>
      <div class="flex-1_5 text-r">
        <div class="second_item mg-0 color-f font-20 fontW-7 flex-r-end font-f-ib">
          <img class="mgr-5" :src="imgEth" width="20px">
          <span>{{item.amount}}</span>
        </div>
      </div>
      <div class="font-20 fontW-7 text-c flex-1">
        <div
          :class="item.nid == 1? 'color-04f0 flex-1':'color-ff00 flex-1'">
          {{item.nid == 1? `+${item.time}%`:`-${item.time}%`}}
        </div>
      </div>
      <div class="font-20 fontW-7 text-c flex-1 font-f-ib">
       <div :class="item.nid == 1? 'color-04f0 flex-1':'color-ff00 flex-1'">{{item.nid == 1? `+${item.day}%`:`-${item.day}%`}}</div>
      </div>
      <div class="color-f font-20 fontW-7 text-c flex-1">
        <div class="text-c flex-n-center font-f-ib">
          <img class="mgr-5" :src="imgEth" width="20px">
          <span>{{item.floorPrice}}</span>
        </div>
      </div>
      <div class="color-f font-20 fontW-7 text-c flex-1 font-f-ib">{{item.holder}}k</div>
      <div class="color-f font-20 fontW-7 text-c flex-1 font-f-ib">{{item.numItems}}k</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['rangData'],
  data () {
    return {
      imgEth: require('../../../assets/ETH/ETH.svg')
    }
  }
}
</script>
<style lang="less" scoped>
.header{
  .second_item {
    width: 70%;
  }
}
.item {
  .second_item {
    width: 70%;
  }
}
</style>
